<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <h2>{{message}}</h2>
  <div @click="divClick">
<!--    stop修饰符-->
    <button @click.stop="btn1Click">按钮1</button>
  </div>
  <br>
  <form action="www.baidu.com">
<!--    prevent修饰符-->
    <input type="submit" value="提交" @click.prevent="submitClick" >
  </form>
  <br>
<!--  监听keyup.enter-->
  <input type="text" @keyup="keyUp">
  <br>
  <br>
<!--  once修饰符-->
  <button @click.once="btn2Click">按钮2</button>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data:{
      message:"Hello zk I am Vue !",
      counter:0
    },
    methods:{
      btn1Click() {
        console.log("btn1Click");
      },
      divClick(){
        console.log('divClock');
      },
      submitClick() {
        console.log('submitClick');
      },
      keyUp(){
        console.log('keyUp');
      },
      btn2Click() {
        console.log('btn2Click');
      }
    }
  })
</script>
</body>
</html>
